/**
 * 瀑布流
 */
 const Pager = require('../aotoo/core/index')
 const lib = Pager.lib
 
 // const imgHei = ['200rpx', '300rpx', '350rpx', '400rpx']
 // `height: ${imgHei[Math.floor(Math.random() * imgHei.length)]}`
 
 
 
 module.exports = function(params) {
   let dft = {
     $$id: lib.suid('waterfall_'),
     listClass: 'demo-list',           // 容器类名
     itemClass: 'water-item',           // 子项类名
     data: [],                           // 传入collapse数组数据
     isLoading: false,
     customLoad: null,
   }
   params.listClass ? params.listClass = 'wrap-list ' + params.listClass : ''
   params.itemClass ? params.itemClass = 'water-item ' + params.itemClass : ''
   let opts = Object.assign({}, dft, params)
   let footer =  opts.isLoading ? opts.customLoad ? opts.customLoad : {title: '数据正在加载，请稍后...', itemClass: 'waterfall-load-tips'} : {}
   
   return {
     $$id: opts.$$id,
     listClass: opts.listClass,
     itemClass: opts.itemClass,
     data: [],
     header: opts.header? opts.header: '',
     footer: {
       $$id: 'footer',
       ...footer
     },
     methods: {
       __ready(){
         const that = this  
         this.query = wx.createSelectorQuery().in(this)
         if (opts.data.length > 0) {
           this.updatex(opts.data)
         }
         this.$fooder = this.activePage.getElementsById('footer')
         this.loadImgNum = 0
       },
       adapter(data, idx = 0) {
         return data.map((item, ii) => {
           let _idx = parseInt(idx) + ii
           item.id = item.id ? item.id : lib.suid('wf_item_')
           // item.img.bindload = 'onloadImg'
           // item.img.itemStyle = `height: 300rpx;`
           // item.itemStyle = `grid-row: var(--item-row-span-${_idx});`
           item.itemStyle = `grid-row: var(--item-row-span-${item.id}); visibility: var(--vsb-${item.id}, hidden)`
           return item
         })
       },
       queryList(cb) {
         const that = this
         setTimeout(() => {
           this.query.selectAll('.wrap-list>>>.water-item').boundingClientRect().exec(ret=>{
             if (ret[0] === null) return;
             let styleStr = '';
             ret[0].forEach((ele, ii) => {
               let height = ele.height
               let span = parseInt((height / 20))
               styleStr += `--item-row-span-${ele.id}: auto / span ${span}; --vsb-${ele.id}: visible;`
             })
             that.css(styleStr)
             typeof cb === 'function' ? cb.call() : ''
           })
         }, 0);
       },
       updatex(params) {
         // const that = this
         // let $data = this.data.$list.data
         // console.log(params, $data);
         // let tmpData = $data.concat(this.adapter(params, $data.length))
         // this.update(tmpData, function() {
         //   that.queryList()
         // })
         this.update(this.adapter(params), function() {
           this.queryList()
         })
       },
       insertx(data) {
         const that = this
         let $data = this.data.$list.data
         const _n = this.adapter(data, $data.length)
         this.$fooder.update({
           title: '数据正在加载，请稍后...',
           itemClass: 'waterfall-load-tips'
         }, () => {
           that.append(_n)
           that.queryList(this.$fooder.reset())
         })
       },
       loaded() {
         this.$fooder.update({
           title: '数据已全部加载完成',
           itemClass: 'waterfall-load-tips'
         })
       },
     }
   }
 }